<template>
  <div ref="mapContainer" class="map-container"></div>
</template>

<script setup>
import * as echarts from "echarts";
import chinaJson from "@/assets/china.json";
import { onMounted, ref } from "vue";

const mapContainer = ref(null);

onMounted(() => {
  const myChart = echarts.init(mapContainer.value);
  echarts.registerMap("china", chinaJson);
  const option = {
    geo: {
      map: "china",
      roam: false,
      label: {
        show: false,
      },
      gridIndex: 0, // 使用第 0 个网格
      splitLine: {
        show: true,
        lineStyle: {
          color: "gray",
          width: 1,
        },
      },
    },
    grid: [
      {
        left: "10%",
        right: "10%",
        bottom: "10%",
        top: "10%",
        containLabel: true,
      },
    ],
    series: [
      {
        type: "lines",
        zlevel: 2,
        lineStyle: {
          normal: {
            width: 3,
            opacity: 0.6,
            curveness: 0.2,
            color: function (params) {
              if (params.data.dashuju === 500) {
                return "red";
              } else if (params.data.dashuju === 300) {
                return "green";
              }
              return "gray";
            },
          },
        },
        data: [
          {
            coords: [
              [116.4074, 39.9042],
              [111.67, 40.82],
            ],
            dashuju: 500,
          },
          {
            coords: [
              [111.67, 40.82],
              [91.11, 29.97],
            ],
            dashuju: 300,
          },
        ],
      },
    ],
  };
  myChart.setOption(option);
});
</script>

<style scoped>
.map-container {
  width: 100%;
  height: 800px;
}
</style>
